<template>
	<view class="container">
		<view class="login-wrapper">
			<!-- <view class="header">登录</view> -->
			<view class="form-wrapper">
				<input class="input-item" type="text"  placeholder="phonenumber" v-model="username" />
				<input class="input-item" type="text"  placeholder="password" v-model="password" password="true"/>
				<button type="default" class="button" @click="login">登录</button>
			</view>
			<view class="buttom">
				<view class="hint">
					未注册手机号登陆后自动生成账号
<!-- 					<text class="link">校园服务系统用户协议、隐私政策，</text>
 -->					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import { createConnection} from '@/websocket.js'
	export default {
		data() {
			return {
				username:'',
				password:'',
				intervalID:''
			}
		},
		onLoad() {
			// console.log('我是onload')
		},
		onShow() {
			// uni.hideToast()
			// console.log('我是onshow')
			
		},
		computed: {
		  ...mapState(['userInformation','user_order','customer_order','cusOrderID'])
		},
		
		methods: {
			intervalFunc(){
				// 顾客订单
				this.$store.dispatch('getCusOrder',{amount:10})
				// 当日销量
				this.$store.dispatch('get_drxl')
				// this.$store.dispatch('get_dyxl')
				return this.intervalFunc
			},
			cusOrderFunc(){
				// this.$store.dispatch('getUserOrder')
				// this.$store.dispatch('getGoods')
				this.$store.dispatch('get_goods')
				return this.cusOrderFunc
			},
			/**
			 * 用户名：4，123456登录
			 */
			async login(){
				//获取用户信息
				let result = await this.$request({
					url:'/supermarket/user-consumer/consumerRegister/' + this.username + '/' + this.password,
					method: 'POST'
				})
				
				this.$store.state.userInformation=result
				console.log('用户信息',this.userInformation)
				
				if(this.userInformation.userID){
					console.log('是不是管理员', this.userInformation.isadmin == 1)
					this.$store.dispatch('get_userSite',this.userInformation.userID)
					
					//等于0是普通用户
					if(this.userInformation.isadmin==0){
						// 登录后建立websocket连接
						console.log('userInformation ====', this.userInformation)
						let userID = this.userInformation.userID
						createConnection(userID)
						
						// this.user_order=order 报错了（能读不能写）
						// this.$store.state.user_order=order  //好使
						
						//顾客请求自己的订单
						this.$store.dispatch('getUserOrder')
						this.$store.state.cusOrderID = setInterval(this.cusOrderFunc(),60 * 60 * 1000)//循环商品信息
						this.$store.dispatch('get_goods')
						
						uni.switchTab({
							 // url: '/pages/my/my'
							 // url: '/pages/zhuye/zhuye'
							 url: '/pages/menu/menu'
						})
					}
					
					if(this.userInformation.isadmin==1){
						// 取消管理员登录，只允许用户登录, 这块代码不用了，因为用户和管理员分开了
						// return 
						this.$store.dispatch('get_goods')
						
						//管理员获取当日销量和当月销量和获取全部顾客订单
						this.$store.state.intervalID=setInterval(this.intervalFunc(),2000) //循环当日销量，顾客订单
						uni.switchTab({
							 url: '/pages/menu/menu'
						})
					}
					
				}else{
					uni.showToast({
					    title: '用户名或密码错误',
						icon:'none',
					    duration: 2000
					});
				}
				
			}
		}
	}
</script>

<style lang="scss">
	
	.container{
		height: 1210rpx;
		// background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);
		display: flex;
		justify-content: center;
		.login-wrapper{
			// background-color: #FFFFFF;
			width: 400rpx;
			height: 500rpx;
			padding: 0 50rpx;
			margin: 250rpx 50rpx;
			border-radius: 10rpx;
			margin-top: 400rpx;
		}
	}
	.header{
		
		font-size: 50rpx;
		font-weight: bold;
		text-align: center;
		line-height: 150rpx;
		// border: 1rpx solid blue;
	}
	.input-item{
		border-bottom: 1rpx solid gray;
		margin-bottom: 20rpx;
	}
	.button{
		color: #FFFFFF;
		margin-top: 50rpx;
		background: #02a774;
		font-size: 33upx;
	}
	.buttom {
		.loginType {
			display: flex;
			padding: 350rpx 150rpx 150rpx 150rpx;
			justify-content:space-between;
			
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #000000;
				font-size: 28rpx;
			}
		}
		
		.hint {
			padding: 20rpx 0rpx;
			font-size: 20rpx;
			color: #000000;
			
			.link {
				color:#005757;
			}
		}
	}
</style>


